<template>
  <div id="stats" v-title data-title="国内疫情情况统计">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>最新疫情统计</span>
      </div>
      <div class="stats">
        <div v-for="(value, key, index) in todayStatictic" :key="index" class="text item stat">
          <h3>{{key}}</h3>
          <p>{{value}}</p>
        </div>
      </div>
    </el-card>
    <News></News>
  </div>
</template>

<script>
import News from '@/components/chart/News'
export default {
  data() {
    return {
      todayStatictic: {}
    }
  },
  mounted() {
    let arr = JSON.parse(localStorage.getItem('showapi_res_body'))
    this.todayStatictic = arr.todayStatictic
  },
  methods: {
  },
  components: {
    News
  }
}
</script>

<style lang="scss" scoped>
#stats {
  width: 100%;
  height: 100%;
  .el-card {
    margin-bottom: 20px;
    // 文字数据部分
    ::v-deep .el-card__body {
      .stats {
        display: flex;
        justify-content: space-around;
        text-align: center;
        flex-wrap: wrap;
        .stat {
          background-color: rgba($color: #33CCFF, $alpha: 0.6);
          border-radius: 10px;
          box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
          padding: 15px 25px;
          margin: 30px;
          cursor: pointer;
          transition: all .5s;
          h3 {
            margin-bottom: 10px;
          }
          p {
            font-weight: bold;
            color: #fff;
          }
        }
        .stat:hover {
          transform: scale(1.1);
        }
      }
    }
  }
}
</style>